<template>
  <div>
    <el-dialog :title="form.id?'编辑客户':'添加客户'" :visible="dialogFormVisible" @close="closeFn">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="经纪">
          <el-select v-model="form.agent" placeholder="请选择经纪人" style="width:80%">
            <el-option v-for="i in mangerList" :key="i.id" :label="i.name" :value="i.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" style="width:80%" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" style="width:80%" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" style="width:80%" />
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="form.wechat" style="width:80%" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input v-model="form.desc" style="width:80%" type="textarea" rows="3" />
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            class="avatar-uploader"
            action="#"
            :file-list="fileList"
            :http-request="uploadFn"
            :limit="1"
            :on-remove="removeFn"
            list-type="picture-card"
            :class="{disabled:fileList.length===1}"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" plain @click="closeFn">取 消</el-button>
        <el-button size="small" type="primary" plain @click="confirmFn">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { addClient, editClient } from '@/api/clients'
import { getMangerList } from '@/api/managerList'
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDlMhkX3JI0RbT4ORCfusKwMYT7UaQ1KM7',
  SecretKey: 'KI0TjjU1IH0SfbvylIYcT9eusZ0iFagX'
})
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入描述内容', trigger: 'blur' }
        ]
      },
      mangerList: [],
      fileList: [],
      percentage: 0,
      imageUrl: ''
    }
  },
  async created() {
    const res = await getMangerList()
    // console.log(71, res)
    this.mangerList = res.data
  },
  methods: {
    // 关闭弹窗
    closeFn() {
      this.$refs.form.resetFields()
      this.$emit('update:dialogFormVisible', false)
      this.fileList = []
      this.form = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
    },
    async confirmFn() {
      await this.$refs.form.validate()
      if (this.fileList.length === 0) {
        this.fileList = []
        this.form.image = ''
      }
      if (this.form.id) {
        await editClient(this.form)
      } else {
        await addClient(this.form)
      }
      this.$emit('addEvent')
      this.closeFn()
    },
    // 上传图片
    uploadFn(data) {
      this.fileList.push({ url: '' })
      cos.putObject({
        Bucket: 'hr-project-1313460461', /* 必须  存储桶名字*/
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须  上传后的图片名字*/
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: (progressData) => {
        //   console.log(progressData)
          this.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        // console.log(51, err || data)
        if (!err) {
          this.fileList[0].url = 'https://' + data.Location
          this.form.image = 'https://' + data.Location
        }
      })
    },
    // 移除图片
    removeFn(file, fileList) {
      this.fileList = fileList
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
